<template>
    <div class="cropper-content">
      <div class="cropper-box">
        <div class="cropper">
          <vue-cropper
            ref="cropper"
            :img="option.img"
            :output-size="option.size"
            :output-type="option.outputType"
            :info="true"
            :full="option.full"
            :fixed="fixed"
            :fixed-number="fixedNumber"
            :can-move="option.canMove"
            :can-move-box="option.canMoveBox"
            :fixed-box="option.fixedBox"
            :original="option.original"
            :auto-crop="option.autoCrop"
            :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight"
            :center-box="option.centerBox"
            @real-time="realTime"
            :high="option.high"
            @img-load="imgLoad"
            mode="cover"
            :max-img-size="option.max"
            @crop-moving="cropMoving"
          ></vue-cropper>
        </div>
        <!--底部操作工具按钮-->
        <div class="footer-btn">
          <div class="scope-btn">
            <!-- <label class="btn" for="uploads">选择封面</label> -->
            <!-- <input
              type="file"
              id="uploads"
              style="position:absolute; clip:rect(0 0 0 0);"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              @change="selectImg($event)"
            />-->
            <el-upload class="mb10" action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
              <el-button size="small"> 选择图片 <i class="el-icon-upload"></i> </el-button>
            </el-upload>
            <el-button
              size="mini"
              type="danger"
              plain
              icon="el-icon-zoom-in"
              @click="changeScale(1)"
            >放大</el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              icon="el-icon-zoom-out"
              @click="changeScale(-1)"
            >缩小</el-button>
            <el-button size="mini" type="danger" plain @click="rotateLeft">↺ 左旋转</el-button>
            <el-button size="mini" type="danger" plain @click="rotateRight">↻ 右旋转</el-button>
          </div>
          <div class="upload-btn">
            <el-button size="mini" type="success" @click="uploadImg('blob')">
              确定
              <i class="el-icon-upload"></i>
            </el-button>
            <el-button size="mini" @click="down('base64')" type="primary">图片下载</el-button>
          </div>
        </div>
      </div>
  
      <!--预览效果图-->
      <div class="show-preview">
        <div :style="previews.div" class="preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
        <label class="c-item">
          <p>图片下载格式:</p>
          <label>
            <input type="radio" name="type" value="jpeg" v-model="option.outputType" />
            jpg
          </label>
          <label>
            <input type="radio" name="type" value="png" v-model="option.outputType" />
            png
          </label>
          <label>
            <input type="radio" name="type" value="webp" v-model="option.outputType" />
            webp
          </label>
        </label>
      </div>
    </div>
  </template>
  
  <script>
  import { VueCropper } from 'vue-cropper'
  export default {
    name: "CropperImage",
    components: {
      VueCropper
    },
    props: {
      Name: {
        type: String,
      },
      cropperImage: {
        type: String,
      }
    },
    data () {
      return {
        name: this.Name,
        previews: {},
        option: {
          img: this.cropperImage,             //裁剪图片的地址
          outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
          outputType: 'jpeg',  //裁剪生成图片的格式（jpeg || png || webp）
          info: true,          //图片大小信息
          canScale: true,      //图片是否允许滚轮缩放
          autoCrop: true,      //是否默认生成截图框
          autoCropWidth: 230,  //默认生成截图框宽度
          autoCropHeight: 150, //默认生成截图框高度
          fixed: true,         //是否开启截图框宽高固定比例
          fixedNumber: [1.53, 1], //截图框的宽高比例
          full: false,         //false按原比例裁切图片，不失真
          fixedBox: true,      //固定截图框大小，不允许改变
          canMove: false,      //上传图片是否可以移动
          canMoveBox: true,    //截图框能否拖动
          original: false,     //上传图片按照原始比例渲染
          centerBox: false,    //截图框是否被限制在图片里面
          height: true,        //是否按照设备的dpr 输出等比例图片
          infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
          maxImgSize: 3000,    //限制图片最大宽度和高度
          enlarge: 1,          //图片根据截图框输出比例倍数
          mode: '230px 150px', //图片默认渲染方式
        },
        fixedNumber: [16, 9],
        fixed: false,
      }
    },
    methods: {
        requestUpload() {
      },
        beforeUpload(file) {
        if (file.type.indexOf("image/") == -1) {
          this.$message.error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        } else {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            this.option.img = reader.result;
          };
        }
      },
      // 图片下载
      down (type) {
        // event.preventDefault()
        var aLink = document.createElement('a')
        console.log(aLink)   // a 标签
        aLink.download = '子设备图片'  // 名字
        // 输出
        if (type === 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            this.downImg = window.URL.createObjectURL(data)
            aLink.href = window.URL.createObjectURL(data)
            aLink.click()
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
            this.downImg = data
            aLink.href = data
            aLink.click()
          })
        }
      },
      // 截图框移动
      cropMoving (data) {
        console.log('截图框移动', data)
      },
      //图片移动回调函数
      imgMoving (data) {
        console.log('图片移动', data)
      },
      //初始化函数
      imgLoad (msg) {
        console.log("工具初始化函数=====" + msg)
      },
      //图片缩放
      changeScale (num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      //向左旋转
      rotateLeft () {
        this.$refs.cropper.rotateLeft()
      },
      //向右旋转
      rotateRight () {
        this.$refs.cropper.rotateRight()
      },
      //实时预览函数
      realTime (data) {
        console.log('实时预览')
        this.previews = data
      },
      //选择图片
      // selectImg (e) {
      //   let file = e.target.files[0]
      //   if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
      //     this.$message({
      //       message: '图片类型要求：jpeg、jpg、png',
      //       type: "error"
      //     })
      //     return false
      //   }
      //   //转化为blob
      //   let reader = new FileReader()
      //   reader.onload = (e) => {
      //     let data
      //     if (typeof e.target.result === 'object') {
      //       data = window.URL.createObjectURL(new Blob([e.target.result]))
      //     } else {
      //       data = e.target.result
      //     }
      //     this.option.img = data
      //   }
      //   //转化为base64
      //   reader.readAsDataURL(file)
      // },
      //上传图片
      uploadImg (type) {
        // if (type === 'blob') {
        //   //获取截图的blob数据
        //   this.$refs.cropper.getCropBlob(async (data) => {
        //     let formData = new FormData()
        //     formData.append('file', data, "DX.jpg")
        //     //调用axios上传
        //     const res = await api.baseData.uploadFiles(formData)
        //     // let { data: res } = await _this.$http.post('/api/file/imgUpload', formData)
        //     if (res.code === 200) {
        //       this.$message({
        //         type: "success",
        //         message: res.msg
        //       })
        //       // 把最终的裁剪的图片传过去
        //       const obj = {
        //         // name: file.name,
        //         url: res.url,
        //       }
        //       this.$emit('uploadImgSuccess', obj)
        //       // 通知父组件关闭弹窗
        //       this.$emit('closeDialog')
        //     } else {
        //       this.$message({
        //         message: '文件服务异常，请联系管理员！',
        //         type: "error"
        //       })
        //     }
        //   })
        // }
      },
    },
    created () {
      console.log('cropperImage')
      this.option.img = this.cropperImage
    },
  }
  </script>
  
  <style scoped >
  .btn {
    height: 20px;
    line-height: 0.6;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
   
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all 0.2s ease;
    text-decoration: none;
    user-select: none;
  }
  .cropper-content {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    .cropper-box {
      flex: 1;
      width: 100%;
      .cropper {
        width: auto;
        height: 300px;
      }
    }
  
    .show-preview {
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      .preview {
        overflow: hidden;
        border: 1px solid #67c23a;
        background: #cccccc;
      }
    }
  }
  .footer-btn {
    margin-top: 30px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    .scope-btn {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      padding-right: 10px;
    }
    .upload-btn {
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
    }
    .btn {
      outline: none;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      -webkit-transition: 0.1s;
      transition: 0.1s;
      font-weight: 500;
      padding: 8px 15px;
      font-size: 12px;
      border-radius: 3px;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      margin-right: 10px;
    }
  }
  </style>